<!--  -->
<template>
  <div class="showDataPanel">
    <el-table class="realTableView"  row-key="deviceId">
      <el-table-column prop="rangeName" label="区域名称" align="center"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
      <el-table-column prop="deviceNo" label="设备编号" align="center"></el-table-column>
      <el-table-column label="采集时间" prop="dataTime" width="90"/>
      <el-table-column label="正向有功实际值" align="center">
        <el-table-column prop="realActiveEnergyConsumption" label="使用量(kw/h)" :render-header="renderHeader"
                         align="center"/>
        <el-table-column prop="realActiveEnergyTotal" label="累计值(kw/h)" :render-header="renderHeader"
                         align="center"/>
      </el-table-column>
      <el-table-column prop="multiplier" label="倍率" align="center" :render-header="renderHeader"></el-table-column>
      <el-table-column prop="reverseActiveEnergy" :label="'反向有功\n(kw/h)'" :render-header="renderHeader" align="center"/>
      <el-table-column prop="inductiveReactivePower" :label="'感性无功\n(kvrah)'" :render-header="renderHeader"
                       align="center"/>
      <el-table-column prop="capacitiveReactivePower" :label="'容性无功\n(kvrah)'" :render-header="renderHeader"
                       align="center"/>
      <el-table-column prop="ctRatio" label="CT变比" :render-header="renderHeader" align="center"></el-table-column>
      <el-table-column prop="ptRatio" label="PT变比" :render-header="renderHeader" align="center"></el-table-column>
      <el-table-column label="电压(V)" align="center">
        <el-table-column prop="phaseAVoltage" label="A相电压" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseBVoltage" label="B相电压" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseCVoltage" label="C相电压" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column label="线电压(V)" align="center">
        <el-table-column prop="lineAbVoltage" label="AB线电压" :render-header="renderHeader" align="center"/>
        <el-table-column prop="lineBcVoltage" label="BC线电压" :render-header="renderHeader" align="center"/>
        <el-table-column prop="lineCaVoltage" label="CA线电压" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column label="电流(A)" align="center">
        <el-table-column prop="phaseACurrent" label="A相电流" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseBCurrent" label="B相电流" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseCCurrent" label="C相电流" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column label="有功功率(kw)" align="center">
        <el-table-column prop="phaseAActivePower" label="A相有功功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseBActivePower" label="B相有功功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseCActivePower" label="C相有功功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="allActivePower" label="总有功功率" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column label="无功功率(kVAr)" align="center">
        <el-table-column prop="phaseAReactivePower" label="A相无功功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseBReactivePower" label="B相无功功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseCReactivePower" label="C相无功功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="allReactivePower" label="总无功功率" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column label="视在功率(kVA)" align="center">
        <el-table-column prop="phaseAApparentPower" label="A相视在功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseBApparentPower" label="B相视在功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseCApparentPower" label="C相视在功率" :render-header="renderHeader" align="center"/>
        <el-table-column prop="allApparentPower" label="总视在功率" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column label="功率因数" align="center">
        <el-table-column prop="phaseAPowerFactor" label="A相功率因数" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseBPowerFactor" label="B相功率因数" :render-header="renderHeader" align="center"/>
        <el-table-column prop="phaseCPowerFactor" label="C相功率因数" :render-header="renderHeader" align="center"/>
        <el-table-column prop="allPowerFactor" label="总功率因数" :render-header="renderHeader" align="center"/>
      </el-table-column>
      <el-table-column prop="frequency" label="频率(Hz)" align="center" :render-header="renderHeader"></el-table-column>
      <el-table-column prop="status" label="状态" align="center" :render-header="renderHeader">
        <template #default="scope">
          <span :style="scope.row.status === 1 ?'color:#a8ff55' : 'color:#ff4037'">{{ scope.row.status === 1 ? "正常" : "异常" }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import {h} from "vue";

let component;
import moment from 'moment';

export default {
  watch:{
    async deviceNoList() {
      let response = await component.$asyncPost("data", {
        actionType: "realTimeData",
        deviceInfoList: component.deviceInfoList,
        type:"electric"
      });
      if(response.success){
        component.dataList = response.dataList;
      }

    }
  },
  data() {
    return {
      deviceInfoList: [],
      deviceNoList: [],
      dataList:[],
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      }
    };
  },
  methods: {
    renderHeader({column}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth + 40; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    getData(data,type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType=type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.test1 {
}
</style>